<!--风险点详情-->
<template>
	<view class="order">
		<view>
			<!--风险点名称-->
			<view class="cu-form-group orderss">
				<view class="title">{{xqData.name}}</view>
				<!-- 	<button class='cu-btn bg-green'>已处理</button> -->
				<u-button v-if="xqData.stageText" style="width:100px; margin-right:0px" type="error" shape="circle" size="small" color="#329395"
					class="btn" :plain="true">{{xqData.stageText}}
				</u-button>
			</view>
			<view class="cu-form-group">
				<view class="title">风险点名称</view>
				<input :placeholder="xqData.name" name="input" disabled="disabled" placeholder-class="cl"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">所属矿山</view>
				<input :placeholder="xqData.mineInfoName" name="input" disabled="disabled" placeholder-class="cl"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">坐标</view>
				<input name="input" disabled="disabled" placeholder-class="cl">{{xqData.longitude}},{{xqData.latitude}}</input>

			</view>
			<view class="cu-form-group">
				<view class="title">巡查状态</view>
				<!-- 	<button class='cu-btn bg-green'>已处理</button> -->
				<text style="color: blue;">{{xqData.stageText}}
				</text>
			</view>
			<view class="cu-form-group">
				<view class="title">巡查人员</view>
				<input :placeholder="xqData.personName" name="input" disabled="disabled" placeholder-class="cl"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">最近巡查</view>
				<view>{{parseInt(patrolTime) | dateFormat}}</view>
			</view>
			<view class="cu-form-group">
				<view class="title">联系方式</view>
				<input :placeholder="xqData.phone" name="input" disabled="disabled" placeholder-class="cl"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">风险等级</view>
				<input :placeholder="risk_level[xqData.riskLevel]" name="input" disabled="disabled" placeholder-class="cl"></input>
				<text class='cuIcon-locationfill text-orange'></text>
			</view>
			<view class="cu-form-group align-start">
				<view class="title">
					巡查备注</view>
				<textarea maxlength="-1" disabled="disabled" placeholder-class="cl"
					@input="textareaBInput" :placeholder="xqData.patrolText"></textarea>
			</view>
		</view>
	</view>
</template>

<script>
	import storage from "@/utils/storage";
	import {syfglxqList} from "@/api/my/syfglxq.js"
	import { mapState } from 'vuex'//引入mapState
	export default {
		data() {
			return {
				xqData:{},
				patrolTime:"",
			};
		},


		computed: {

		},
		onLoad(option) {
			// console.log(this.$route.query)
			// let {id} = this.$route.query
			
			this.getSbgjxqList(option.id)
		},
		computed:{
			...mapState({
				risk_level: state => state.sjzd.sjzdList.risk_level,
				accident_level: state => state.sjzd.sjzdList.accident_level,
			})
		},
		methods: {

			// 设备告警详情数据
			getSbgjxqList(riskPointId) {
				syfglxqList(riskPointId).then((result)=>{
					const data = result.data
					this.xqData = data
					if(result.data.patrolTime === null){
						this.patrolTime = 0
					}else{
						this.patrolTime = result.data.patrolTime
					}
				}).catch((err)=>{console.log(err)})
			},


		},
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f6f7;
	}

	.mine-container {
		width: 100%;
		height: 100%;
		padding: 10px 10px 45px 10px;

		.header-section {
			padding: 22px 0px 22px 15px;
			background-color: #fff;
			color: #000;
			border-radius: 4px 4px 0px 0px;

			.login-tip {
				font-size: 18px;
				margin-left: 10px;
			}

			.cu-avatar {
				border: 2px solid #eaeaea;

				.icon {
					font-size: 40px;
				}
			}

			.user-info {
				margin-left: 15px;

				.u_title {
					font-size: 20px;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #343434;
					line-height: 62rpx;
				}

				.u_title_n {
					font-size: 16px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #595959;
					line-height: 22px;
				}
			}
		}

		.content-section {
			position: relative;

			.mine-actions {
				margin: 15px 15px;
				padding: 20px 0px;
				border-radius: 8px;
				background-color: white;

				.action-item {
					.icon {
						font-size: 28px;
					}

					.text {
						display: block;
						font-size: 13px;
						margin: 8px 0px;
					}
				}
			}
		}
	}

	.handle-to {
		width: 108px;
		height: 36px;
		position: absolute;
		right: 0;
		background-color: #123;
		background: linear-gradient(to right, #2a62a5, #5192df);
		border: 1px solid #004ca7;
		border-right: none;
		border-radius: 20px 0px 0px 20px;
		margin-top: 36rpx;

		.textone {
			color: #fff;
			margin-left: 30rpx;
		}
	}

	.buttom-ks {
		height: 78px;
		background-color: #123;
		background: linear-gradient(to right, #e4eaf0, #e4eaf0);
		border-radius: 5px;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		border: 1px solid #b0d4ff;

		image {
			width: 440rpx;
			height: 52rpx;
		}

		text {
			font-size: 20px;
			font-family: Roboto-BoldItalic, Roboto;
			font-weight: normal;
			color: #225ea4;
			line-height: 24px;
			font-weight: 700;
		}
	}

	.vac {
		font-size: 14px;
		color: #225ea4;
		font-style: italic;
	}

	.menu-list {
		margin: 10px 0rpx 0rpx 0rpx;
	}

	.list-cell:first-child {
		border-radius: 4px 4px 4px 4px;
	}

	.list-cell {
		padding: 21px 16px;
	}

	.v-top {
		width: 10px;
		height: 18px;
		background-color: #123;
		border-radius: 0px 50px 50px 0px;
		margin-left: -15px;
		background: #9ebadb;
	}

	.v-buttom {
		width: 90px;
		height: 25px;
		font-size: 18px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 700;
		color: rgba(52, 52, 52, 0.85);
		line-height: 25px;
		text-align: left;
		margin-left: 15px;
	}

	.v-fb {
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #8c8c8c;
		line-height: 24px;
		position: absolute;
		right: 28px;
		width: 154px;
		text-align: right;
	}

	.list-vcell {
		margin-bottom: 10px;
		background: #ffffff;
		box-shadow: 0px 4px 6px 0px rgba(123, 149, 149, 0.08);
		border-radius: 4px;
	}

	.uni-image {
		width: 320px;
		height: 0px;
		display: inline-block;
		overflow: hidden;
		position: relative;
	}

	.unioi {
		width: 140px;
		height: 30px;
	}

	.order {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 8rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;
		letter-spacing: 2rpx;
		box-shadow: 0px 3px 10px 0px rgba(148, 177, 188, 0.38);
	}

	.orderss {
		width: 710rpx;
		background-color: #ffffff;
		margin: -11px -20px 21px -11px;
		border-radius: 8rpx;
		box-sizing: border-box;
		padding: 0px 13px 1px 27px;
		font-size: 28rpx;
		letter-spacing: 2rpx;
		box-shadow: 0px 3px 10px 0px rgba(148, 177, 188, 0.38);
	}

	.u-page {
		padding: 0;

		&__item {
			&__title {
				color: $u-tips-color;
				background-color: $u-bg-color;
				padding: 15px;
				font-size: 15px;

				&__slot-title {
					color: $u-primary;
					font-size: 14px;
				}
			}
		}
	}

	.u-collapse-content {
		color: $u-tips-color;
		font-size: 14px;
		height: 210px;
	}

	.text {
		font-size: 12px;
		color: #666;
		margin-top: 5px;
	}

	.uni-px-5 {
		padding-left: 10px;
		padding-right: 10px;
	}

	.uni-pb-5 {
		padding-bottom: 10px;
	}

	.uni-group {
		display: flex;
		align-items: center;
	}

	.text-two {
		color: #457ba5;
	}

	::v-deep .u-collapse-item__content__text {
		padding: 5px 10px !important;
		line-height: 22px;
	}

	::v-deep .u-collapse-content[data-v-06285ef4] {
		color: #343434;
	}

	::v-deep .uni-select {
		background-color: #fff !important;
		border: 0px solid #fff !important;
	}

	::v-deep .uni-select__input-placeholder {
		color: #343434;
		font-size: 14px;
	}

	.align-text {
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #848484;
	}

	.align-text-td {
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #343434;
	}

	::v-deep .u-cell__body {
		background-color: #f2f2f2;
	}

	.example-body {
		flex-direction: column;
		flex: 1;
	}

	.content {
		padding: 15px;
	}

	.text {
		font-size: 14px;
		color: #666;
		line-height: 20px;
	}

	.button {
		// margin-top: 10px;
		margin: 10px;
		margin-bottom: 0;
	}

	.text-three {
		color: #3a9b54;
		font-size: 12px;
	}

	.table--border {
		border: 0px #ebeef5 solid;
		border-buttom: 1px soild #123;
	}

	.uni-table-th {
		border-bottom: 1px #ebeef5 solid;
	}

	.uni-table-td {
		border-bottom: 1px #ebeef5 solid;
	}

	.btn {
		// border: 2rpx solid #005EF4;
		// border-radius: 36rpx;
		margin: 0;
		// background: #329395;
		font-size: 28rpx;
		line-height: 72rpx;
		color: #fff;
	}
</style>
